<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<!-- 课程详情 -->
			<div class="flex">
				<!-- <img class="imgBox margin_right2" :src="info.image_text" alt=""> -->
				<div class="flex1 word_wrap justify_between_column" style="height: 215px;">
					<div class="text_bs color_zero">{{ info.name }}</div>
					<div class="text_f color_six lianghang">
						{{ info.description }}
					</div>
					<div class="flexleft">
						<div class="vipBox margin_right1" v-if="info.is_vip == 1">VIP</div>
						<div class="num">编号：{{ info.id }}</div>
					</div>
					<div class="flexbetween">
						<div class="color_red">
							<span class="priceText">￥</span>
							<span class="price">{{ info.price }}</span>
						</div>
						<div class="flexleft">
							<div class="margin_right3 flexleft pointer" @click="collect(info.id)">
								<i class="el-icon-star-on margin_right1 color_theme" style="font-size: 20px;"
									v-if="info.is_collect"></i>
								<i class="el-icon-star-off margin_right1" v-else></i>
								<span class="text_d color_six">收藏</span>
							</div>
							<el-button type="primary" round style="background-color: #3478F5;"  @click="goTest"
								v-if="info.is_free">立即考试</el-button>
							<el-button type="primary" round style="background-color: #3478F5;" @click="goConfirmOrder"
								v-if="!info.is_free">立即购买</el-button>
						</div>
					</div>
				</div>
			</div>
			<!-- 课程介绍、用户评价、老师 -->
			<div class="flexbetween align_start margin_top5">
				<div class="mainpadding ffffff radius" style="width: 75%;">
					<div class="flexleft">
						<div class="pointer margin_right3" :class="tabActive == 0 ? 'active' : 'noActive'"
							@click="tabActive = 0">
							课程介绍
						</div>
						<div class="pointer" :class="tabActive == 1 ? 'active' : 'noActive'" @click="tabActive = 1">
							用户评价({{comments.length}})</div>
					</div>
					<!-- 课程介绍 -->
					<div class="margin_top" v-show="tabActive == 0">
						<div v-html="info.content"></div>
					</div>
					<!-- 用户评价 -->
					<div v-show="tabActive == 1">
						<div class="margin_top flex" v-for="item in comments" :key="item.id">
							<img class="userImg margin_right2" :src="item.avatar" alt="">
							<div class="flex1">
								<div class="flexbetween">
									<div>
										<div class="text_h color_zero">{{ item.nickname }}</div>
										<div class="text_b color_six">{{ item.createtime_text }}</div>
									</div>
									<div class="flexleft">
										<div class="face1_active margin_right1" v-if="item.composite_evaluate == 5">
										</div>
										<div class="face2_active margin_right1" v-if="item.composite_evaluate == 3">
										</div>
										<div class="face3_active margin_right1" v-if="item.composite_evaluate == 1">
										</div>
										<div class="text_d color_theme">{{ item.composite_evaluate_text }}</div>
									</div>
								</div>
								<div class="text_f color_three margin_top1">
									{{ item.content }}
								</div>
								<div class="margin_top2 flexleft">
									<div class="commImg margin_right1" v-for="(value, i) in item.images_arr" :key="i">
										<img :src="value" alt="">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 23%;">
					<div class="mainpadding ffffff radius">
						<div class="flexbetween">
							<div class="flexleft">
								<img class="userImg margin_right2" :src="info.teacher.avatar" alt="">
								<div class="text_ft color_three">{{info.teacher.username}}</div>
							</div>
							<div class="themeBtn" @click="goTeacherInfo(info.teacher.id)">进入主页</div>
						</div>
						<div class="margin_top2 text_d color_six">
							{{info.teacher.description}}
						</div>
					</div>
					<div class="paddinglr ffffff radius margin_top1">
						<div class="flexbetween paddingtb15 line_b" v-for="(item,index) in info.files_data"
							:key="index">
							<div class="flexleft">
								<img class="informationImg margin_right1" src="../../static/image/home/information.png"
									alt="">
								<div class="text_b color_zero">资料1</div>
							</div>
							<div class="flexleft">
								<img class="lockImg margin_right1" src="../../static/image/home/lock.png" alt="">
								<div class="themeBtn">立即下载</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getCourseInfo, getCollectCourse } from "@/API/home"
	export default {
		data() {
			return {
				tabActive: 0, // 0课程介绍 1用户评价
				id: "",
				info: {},
				comments: []
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getInfo(this.id)
		},
		methods: {
			async getInfo(id) {
				let res = await getCourseInfo({
					id
				})
				this.info = res.data.data.info
				this.comments = res.data.data.comments
				console.log(this.comments, "comments")
			},
			async collect(id) { //收藏、取消收藏
				let res = await getCollectCourse({ id })
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					this.getInfo(this.id)
				} else {
					this.$message.error(res.data.msg)
				}
			},
			goConfirmOrder() { //立即购买
				this.$router.push({
					path: "/confirmOrder",
					query:{
						id:this.id
					}
				})
			},
			goTest(){ //立即考试
				this.$router.push({
					path:"/startTest",
					query:{
						id:this.id
					}
				})
			},
			goTeacherInfo(id) { //进入主页
				this.$router.push({
					path: "/teacher/teacherInfo",
					query: {
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 387px;
		height: 215px;
		min-width: 387px;
		/* // background: rgba(0,0,0,0.6); */
		border-radius: 8px 8px 8px 8px;
	}

	.vipBox {
		padding: 5px 10px;
		background: rgba(255, 0, 0, .1);
		border-radius: 6px 6px 6px 6px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.num {
		padding: 5px 10px;
		background: rgba(153, 153, 153, .1);
		border-radius: 6px 6px 6px 6px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.priceText {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.price {
		font-size: 36px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}

	.userImg {
		width: 41px;
		height: 41px;
		border-radius: 50%;
	}

	.informationImg {
		width: 26.65px;
		height: 26.65px;
	}

	.lockImg {
		width: 12px;
		height: 12px;
	}

	.commImg {
		width: 58px;
		height: 58px;

		img {
			width: 100%;
			height: 100%;
			border-radius: 9px;
		}
	}

	.faceImg {
		width: 17px;
		height: 17px;
	}
</style>